<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>云南驿服务区 - 文化旅游小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置Tailwind自定义颜色和字体
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'yunnan-yellow': '#D4A76A',
                        'yunnan-green': '#4A7C51',
                        'yunnan-red': '#BC3C28',
                        'yunnan-dark': '#2C2622',
                        'yunnan-light': '#F5F1E9'
                    },
                    fontFamily: {
                        'calligraphy': ['"Ma Shan Zheng"', 'cursive'],
                        'sans': ['"Noto Sans SC"', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d4a76a' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
            .btn-hover {
                transition: all 0.3s ease;
            }
            .btn-hover:hover {
                transform: translateY(-2px);
                opacity: 0.9;
            }
            .pulse {
                animation: pulse 2s infinite;
            }
            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }
            .slide-in {
                animation: slideIn 0.3s ease forwards;
            }
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
            .fade-in {
                animation: fadeIn 0.3s ease forwards;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            .scale-in {
                animation: scaleIn 0.3s ease forwards;
            }
            @keyframes scaleIn {
                from { transform: scale(0.9); opacity: 0; }
                to { transform: scale(1); opacity: 1; }
            }
            .skeleton {
                background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                background-size: 200% 100%;
                animation: skeleton-loading 1.5s infinite;
            }
            @keyframes skeleton-loading {
                0% { background-position: 200% 0; }
                100% { background-position: -200% 0; }
            }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-yunnan-light bg-pattern min-h-screen font-sans text-yunnan-dark overflow-x-hidden">
    <!-- 全局通知组件 -->
    <div id="notification" class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-yunnan-dark text-white px-4 py-3 rounded-lg shadow-lg z-50 hidden fade-in">
        <p id="notificationText">通知内容</p>
    </div>

    <!-- 加载指示器 -->
    <div id="loader" class="fixed inset-0 bg-white/80 flex items-center justify-center z-50 hidden">
        <div class="w-12 h-12 border-4 border-yunnan-yellow border-t-transparent rounded-full animate-spin"></div>
    </div>

    <!-- 视频播放模态框 -->
    <div id="videoModal" class="fixed inset-0 bg-black/80 flex items-center justify-center z-50 hidden fade-in">
        <div class="relative w-full max-w-md p-4">
            <button id="closeVideoBtn" class="absolute -top-10 right-0 text-white text-2xl">
                <i class="fa fa-times"></i>
            </button>
            <div class="bg-black rounded-lg overflow-hidden">
                <video id="modalVideo" controls class="w-full h-auto">
                    <source src="#" type="video/mp4">
                    您的浏览器不支持视频播放
                </video>
                <div class="p-3 text-white">
                    <h3 id="videoTitle" class="font-bold">视频标题</h3>
                    <p id="videoDesc" class="text-sm text-gray-300 mt-1">视频描述</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 评论模态框 -->
    <div id="commentModal" class="fixed inset-0 bg-black/50 flex items-end z-50 hidden">
        <div class="bg-white w-full max-w-md rounded-t-xl p-4 slide-in">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-bold">留言评论</h3>
                <button id="closeCommentBtn" class="text-gray-500">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <div class="mb-4">
                <textarea id="commentInput" class="w-full border border-gray-200 rounded-lg p-3 h-24 resize-none focus:ring-2 focus:ring-yunnan-yellow focus:border-yunnan-yellow transition duration-200" placeholder="写下你的评论..."></textarea>
                <div class="flex justify-end mt-2">
                    <button id="submitCommentBtn" class="bg-yunnan-red text-white px-3 py-1 rounded-lg text-sm font-medium btn-hover">
                        发表评论
                    </button>
                </div>
            </div>
            
            <div id="commentsContainer" class="space-y-3 max-h-64 overflow-y-auto">
                <!-- 评论将动态添加到这里 -->
            </div>
        </div>
    </div>

    <!-- 页面容器 -->
    <div class="max-w-md mx-auto bg-white min-h-screen relative shadow-xl">
        <!-- 导航栏 -->
        <nav class="bg-yunnan-yellow text-white py-3 px-4 flex justify-between items-center fixed top-0 left-0 right-0 max-w-md mx-auto z-50">
            <div class="flex items-center">
                <i class="fa fa-arrow-left text-xl mr-2 cursor-pointer" id="backBtn"></i>
                <h1 class="text-lg font-bold" id="pageTitle">云南驿服务区</h1>
            </div>
            <div class="flex items-center">
                <i class="fa fa-bell-o text-xl mr-3 cursor-pointer relative" id="notificationBell">
                    <span id="notificationBadge" class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center hidden">3</span>
                </i>
                <i class="fa fa-user-circle-o text-xl cursor-pointer" id="userProfileBtn"></i>
            </div>
        </nav>

        <!-- 主内容区 -->
        <main class="pt-14 pb-20">
            <!-- 首页 -->
            <section id="homePage" class="page">
                <!-- 轮播Banner -->
                <div class="relative h-48 overflow-hidden">
                    <div class="carousel flex transition-transform duration-500" style="transform: translateX(0)">
                        <div class="w-full flex-shrink-0 relative">
                            <img src="image\茶马古道1.jpg" alt="云南驿历史场景" class="w-full h-full object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                                <p class="text-white text-shadow font-medium">探索茶马古道的历史足迹</p>
                            </div>
                        </div>
                        <div class="w-full flex-shrink-0 relative">
                            <img src="image\茶马古道2.jpg" alt="集章兑周边活动" class="w-full h-full object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                                <p class="text-white text-shadow font-medium">集章赢取"一路有你"限定周边</p>
                            </div>
                        </div>
                        <div class="w-full flex-shrink-0 relative">
                            <img src="image\茶马古道3.jpg" alt="青春留言墙" class="w-full h-full object-cover">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
                                <p class="text-white text-shadow font-medium">青春留言墙，留下你的旅途感悟</p>
                            </div>
                        </div>
                    </div>
                    <!-- 轮播指示器 -->
                    <div class="absolute bottom-2 right-2 flex space-x-1">
                        <span class="w-2 h-2 rounded-full bg-white carousel-indicator active"></span>
                        <span class="w-2 h-2 rounded-full bg-white/50 carousel-indicator"></span>
                        <span class="w-2 h-2 rounded-full bg-white/50 carousel-indicator"></span>
                    </div>
                </div>

                <!-- 实时服务区信息 -->
<div class="bg-white p-4 border-b border-gray-100">
    <h2 class="text-lg font-bold mb-3 flex items-center">
        <i class="fa fa-info-circle text-yunnan-green mr-2"></i>服务区实时信息
    </h2>
    <div class="grid grid-cols-2 gap-3">
        <div class="service-info-item rounded-lg p-3 flex items-center cursor-pointer transition duration-200" id="parkingInfo" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://cdn.pixabay.com/photo/2020/01/12/13/53/car-4760008_1280.jpg'); background-size: cover; background-position: center;">
            <div class="service-info-overlay"></div>
            <i class="fa fa-car text-white text-xl mr-3 relative z-10"></i>
            <div class="relative z-10">
                <p class="text-sm text-white">停车位</p >
                <p class="font-medium text-white">剩余28/100</p >
            </div>
        </div>
        <div class="service-info-item rounded-lg p-3 flex items-center cursor-pointer transition duration-200" id="restaurantInfo" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&h=200&q=80'); background-size: cover; background-position: center;">
            <div class="service-info-overlay"></div>
            <i class="fa fa-cutlery text-white text-xl mr-3 relative z-10"></i>
            <div class="relative z-10">
                <p class="text-sm text-white">餐厅排队</p >
                <p class="font-medium text-white">约5分钟</p >
            </div>
        </div>
        <div class="service-info-item rounded-lg p-3 flex items-center cursor-pointer transition duration-200" id="toiletInfo" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1584622650111-993a426fbf0a?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&h=200&q=80'); background-size: cover; background-position: center;">
            <div class="service-info-overlay"></div>
            <i class="fa fa-bath text-white text-xl mr-3 relative z-10"></i>
            <div class="relative z-10">
                <p class="text-sm text-white">卫生间</p >
                <p class="font-medium text-white">空闲</p >
            </div>
        </div>
        <div class="service-info-item rounded-lg p-3 flex items-center cursor-pointer transition duration-200" id="chargingInfo" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://ts3.tc.mm.bing.net/th/id/OIP-C.2vUG_omFsmGvMp9xiGJ9ywHaFj?rs=1&pid=ImgDetMain&o=7&rm=3'); background-size: cover; background-position: center;">
            <div class="service-info-overlay"></div>
            <i class="fa fa-bolt text-white text-xl mr-3 relative z-10"></i>
            <div class="relative z-10">
                <p class="text-sm text-white">充电桩</p >
                <p class="font-medium text-white">可用3个</p >
            </div>
        </div>
    </div>
</div>

                <!-- 天气预报 -->
                <div class="bg-white p-4 border-b border-gray-100">
                    <h2 class="text-lg font-bold mb-3 flex items-center">
                        <i class="fa fa-cloud text-blue-500 mr-2"></i>今日天气
                    </h2>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <i class="fa fa-sun-o text-yellow-500 text-3xl mr-3"></i>
                            <div>
                                <p class="text-2xl font-bold">26°C</p>
                                <p class="text-sm text-gray-500">晴 微风</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm">紫外线：<span class="text-yellow-500">中等</span></p>
                            <p class="text-sm mt-1">建议：<span>适宜户外活动</span></p>
                        </div>
                    </div>
                </div>

                <!-- 文化短视频 -->
                <div class="p-4 border-b border-gray-100">
                    <div class="relative rounded-lg overflow-hidden h-40 bg-gray-100 cursor-pointer group" id="cultureVideo">
                        <img src="image\视频封面.jpg" alt="云南驿历史文化视频封面" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-12 h-12 rounded-full bg-white/80 flex items-center justify-center pulse">
                                <i class="fa fa-play text-yunnan-red text-xl"></i>
                            </div>
                        </div>
<embed src="image/视频.mp4" height="200" width="200"/>    
<script>
    // 获取元素
    const cultureVideo = document.getElementById('cultureVideo');
    const videoModal = document.getElementById('videoModal');
    const modalVideo = document.getElementById('modalVideo');
    const closeVideoBtn = document.getElementById('closeVideoBtn');

    // 点击视频封面，打开模态框并设置视频源
    cultureVideo.addEventListener('click', () => {
        // 设置视频路径（替换为实际视频路径）
        modalVideo.src = 'image/视频.mp4';
        // 显示模态框
        videoModal.classList.remove('hidden');
        // 尝试播放视频
        modalVideo.play().catch(err => {
            console.error('视频播放失败:', err);
        });
    });

    // 关闭模态框
    closeVideoBtn.addEventListener('click', () => {
        videoModal.classList.add('hidden');
        modalVideo.pause(); // 暂停视频
        modalVideo.src = ''; // 清空视频源，避免继续加载
    });
</script>
                    
<div class="absolute bottom-2 right-2 bg-black/70 text-white text-xs px-2 py-1 rounded">00:15</div>
                    </div>
                    <p class="mt-2 font-medium">云南驿：茶马古道上的千年驿站</p>
                    <p class="text-sm text-gray-500">点击观看历史场景还原</p>
                </div>
<!-- 核心功能入口 -->
                <div class="p-4">
                    <h2 class="text-lg font-bold mb-4">文化体验中心</h2>
                    <div class="grid grid-cols-2 gap-4">
                        <!-- 打卡领补给 -->
                        <div class="relative rounded-xl p-4 text-white card-shadow flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105 overflow-hidden" onclick="navigateTo('checkinPage')">
                            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('image/打卡点.jpg')"></div>
                            <div class="absolute inset-0 bg-black opacity-40"></div>
                            <div class="relative z-10">
                                <i class="fa fa-camera text-3xl mb-2"></i>
                                <p class="font-medium">打卡领补给</p >
                            </div>
                        </div>
                        
                      <!-- 集章兑周边 -->
<div class="relative rounded-xl p-4 text-white card-shadow flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105 overflow-hidden" onclick="navigateTo('stampPage')">
    <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('image/集章点.jpg')"></div>
    <div class="absolute inset-0 bg-black opacity-40"></div>
    <div class="relative z-10">
        <i class="fa fa-certificate text-3xl mb-2"></i>
        <p class="font-medium">集章兑周边</p >
    </div>
</div>
                        
                        <!-- 青春留言墙 -->
                        <div class="relative rounded-xl p-4 text-white card-shadow flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105 overflow-hidden" onclick="navigateTo('messageWallPage')">
                            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('image/留言墙.jpg')"></div>
                            <div class="absolute inset-0 bg-black opacity-40"></div>
                            <div class="relative z-10">
                                <i class="fa fa-comment text-3xl mb-2"></i>
                                <p class="font-medium">青春留言墙</p >
                            </div>
                        </div>
                        
                        <!-- 文化体验套装 -->
                        <div class="relative rounded-xl p-4 text-white card-shadow flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105 overflow-hidden" onclick="navigateTo('experiencePage')">
                            <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('image/文化体验套装.jpg')"></div>
                            <div class="absolute inset-0 bg-black opacity-40"></div>
                            <div class="relative z-10">
                                <i class="fa fa-gift text-3xl mb-2"></i>
                                <p class="font-medium">文化体验套装</p >
                            </div>
                        </div>
                        
                        <!-- 马帮冒险游戏 -->
                         <a href="游戏.html" class="bg-gradient-to-br from-purple-400 to-pink-600 rounded-xl p-4 text-white card-shadow flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105">
                           <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('image/马帮图片.jpg')"></div>
                            <div class="absolute inset-0 bg-black opacity-40"></div>
                            <div class="relative z-10">
                                <i class="fa fa-map-signs text-3xl mb-2"></i>
                                <p class="font-medium">马帮冒险游戏</p >
                            </div>
                        </a >
                    </div>

                 <!-- 特色服务 -->
<div class="mt-6">
    <h2 class="text-lg font-bold mb-4">特色服务</h2>
    <div class="grid grid-cols-3 gap-3">
        <div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-yunnan-light/50 transition duration-200" onclick="navigateTo('arPage')">
            <i class="fa fa-cube text-yunnan-green text-2xl mb-1"></i>
            <p class="text-xs text-center">AR文化体验</p >
        </div>
        <div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-yunnan-light/50 transition duration-200" id="emergencyService">
            <i class="fa fa-medkit text-yunnan-red text-2xl mb-1"></i>
            <p class="text-xs text-center">紧急服务</p >
        </div>
        <div class="flex flex-col items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:bg-yunnan-light/50 transition duration-200" id="baggageStorage">
            <i class="fa fa-suitcase text-yunnan-yellow text-2xl mb-1"></i>
            <p class="text-xs text-center">行李寄存</p >
        </div>
    </div>
</div>

                    <!-- 文化知识问答 -->
                    <div class="mt-6">
                        <h2 class="text-lg font-bold mb-4">文化知识问答</h2>
                        <div class="bg-white rounded-xl p-4 border border-gray-100 cursor-pointer hover:shadow-md transition duration-200" id="quizContainer">
                            <p class="font-medium mb-2">云南驿是茶马古道上的重要驿站，它始建于哪个朝代？</p>
                            <div class="space-y-2">
                                <div class="p-2 border border-gray-200 rounded-lg quiz-option cursor-pointer hover:bg-yunnan-light/50 transition duration-200" data-correct="false">唐朝</div>
                                <div class="p-2 border border-gray-200 rounded-lg quiz-option cursor-pointer hover:bg-yunnan-light/50 transition duration-200" data-correct="true">汉朝</div>
                                <div class="p-2 border border-gray-200 rounded-lg quiz-option cursor-pointer hover:bg-yunnan-light/50 transition duration-200" data-correct="false">宋朝</div>
                                <div class="p-2 border border-gray-200 rounded-lg quiz-option cursor-pointer hover:bg-yunnan-light/50 transition duration-200" data-correct="false">明朝</div>
                            </div>
                            <div id="quizAnswer" class="mt-3 text-sm hidden">
                                <p class="text-yunnan-green"><i class="fa fa-check-circle mr-1"></i> 正确答案：汉朝</p>
                                <p class="text-gray-600 mt-1">云南驿始建于西汉，是南方丝绸之路和茶马古道上的重要驿站，至今已有2000多年历史。</p>
                            </div>
                        </div>
                    </div>

                    <!-- 长辈模式入口 -->
                    <div class="mt-6 p-3 bg-yunnan-light rounded-lg flex items-center justify-center cursor-pointer hover:bg-yunnan-light/70 transition duration-200" id="elderModeBtn">
                        <i class="fa fa-text-height text-yunnan-dark mr-2"></i>
                        <p class="font-medium">切换到长辈模式</p>
                    </div>
                </div>
            </section>

            <!-- 个人中心页面 -->
            <section id="profilePage" class="page hidden">
                <div class="p-4">
                    <div class="bg-gradient-to-r from-yunnan-yellow to-yunnan-red rounded-xl p-5 text-white mb-6">
                        <div class="flex items-center">
                            <img src="https://picsum.photos/id/1005/100/100" alt="游客头像" class="w-16 h-16 rounded-full object-cover border-2 border-white mr-4">
                            <div>
                                <h3 class="font-bold text-lg" id="userName">旅行者</h3>
                                <p class="text-sm opacity-90" id="userPhone">探索云南驿的游客</p>
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-3 gap-2 mt-5">
                            <div class="text-center">
                                <p class="text-2xl font-bold" id="stampCount">0</p>
                                <p class="text-xs mt-1">已集印章</p>
                            </div>
                            <div class="text-center">
                                <p class="text-2xl font-bold" id="checkinCount">0</p>
                                <p class="text-xs mt-1">打卡次数</p>
                            </div>
                            <div class="text-center">
                                <p class="text-2xl font-bold" id="messageCount">0</p>
                                <p class="text-xs mt-1">留言数量</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="bg-white rounded-xl p-4 border border-gray-100">
                            <h3 class="font-bold mb-3">我的集章</h3>
                            <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-3">
                                <div class="flex-shrink-0 w-16 text-center">
                                    <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                        <i class="fa fa-times text-gray-400"></i>
                                    </div>
                                    <p class="text-xs">云南驿</p>
                                </div>
                                <div class="flex-shrink-0 w-16 text-center">
                                    <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                        <i class="fa fa-times text-gray-400"></i>
                                    </div>
                                    <p class="text-xs">大理</p>
                                </div>
                                <div class="flex-shrink-0 w-16 text-center">
                                    <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                        <i class="fa fa-times text-gray-400"></i>
                                    </div>
                                    <p class="text-xs">楚雄</p>
                                </div>
                                <div class="flex-shrink-0 w-16 text-center">
                                    <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                        <i class="fa fa-times text-gray-400"></i>
                                    </div>
                                    <p class="text-xs">昆明西</p>
                                </div>
                                <div class="flex-shrink-0 w-16 text-center">
                                    <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                        <i class="fa fa-times text-gray-400"></i>
                                    </div>
                                    <p class="text-xs">保山</p>
                                </div>
                                <div class="flex-shrink-0 w-16 text-center">
                                    <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                        <i class="fa fa-times text-gray-400"></i>
                                    </div>
                                    <p class="text-xs">丽江</p>
                                </div>
                            </div>
                            <button class="w-full mt-3 bg-yunnan-light text-yunnan-dark py-2 rounded-lg font-medium text-sm btn-hover" onclick="navigateTo('stampPage')">
                                查看全部
                            </button>
                        </div>
                        
                        <div class="bg-white rounded-xl p-4 border border-gray-100">
                            <h3 class="font-bold mb-3">我的活动</h3>
                            <div class="space-y-3">
                                <div class="flex items-center p-2 border border-gray-100 rounded-lg">
                                    <i class="fa fa-trophy text-yellow-500 text-xl mr-3"></i>
                                    <div class="flex-1">
                                        <p class="font-medium text-sm">一路有你主题活动</p>
                                        <p class="text-xs text-gray-500">还差2个印章可参与</p>
                                    </div>
                                    <i class="fa fa-angle-right text-gray-400"></i>
                                </div>
                                <div class="flex items-center p-2 border border-gray-100 rounded-lg">
                                    <i class="fa fa-calendar text-yunnan-green text-xl mr-3"></i>
                                    <div class="flex-1">
                                        <p class="font-medium text-sm">马帮文化讲座</p>
                                        <p class="text-xs text-gray-500">6月25日 14:00-16:00</p>
                                    </div>
                                    <i class="fa fa-angle-right text-gray-400"></i>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl p-4 border border-gray-100">
                            <h3 class="font-bold mb-3">系统设置</h3>
                            <div class="space-y-3">
                                <div class="flex items-center justify-between p-2 border-b border-gray-100">
                                    <div class="flex items-center">
                                        <i class="fa fa-bell text-yunnan-red text-xl mr-3"></i>
                                        <p class="font-medium text-sm">消息通知</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input type="checkbox" value="" class="sr-only peer" checked>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-yunnan-green"></div>
                                    </label>
                                </div>
                                <div class="flex items-center justify-between p-2 border-b border-gray-100">
                                    <div class="flex items-center">
                                        <i class="fa fa-map text-blue-500 text-xl mr-3"></i>
                                        <p class="font-medium text-sm">位置服务</p>
                                    </div>
                                    <label class="relative inline-flex items-center cursor-pointer ml-auto">
                                        <input type="checkbox" value="" class="sr-only peer" checked>
                                        <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-yunnan-green"></div>
                                    </label>
                                </div>
                                <div class="flex items-center p-2 border-b border-gray-100">
                                    <i class="fa fa-question-circle text-blue-500 text-xl mr-3"></i>
                                    <p class="font-medium text-sm">帮助中心</p>
                                </div>
                                <div class="flex items-center p-2">
                                    <i class="fa fa-cog text-gray-500 text-xl mr-3"></i>
                                    <p class="font-medium text-sm">关于我们</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 打卡领补给页面 -->
            <section id="checkinPage" class="page hidden">
                <div class="p-4">
                    <h2 class="text-xl font-bold mb-4">打卡领补给</h2>
                    
                    <div class="bg-yunnan-light rounded-xl p-4 mb-5">
                        <h3 class="font-bold text-lg mb-2 flex items-center">
                            <i class="fa fa-gift text-yunnan-red mr-2"></i>青春补给包
                        </h3>
                        <p class="text-sm text-gray-600 mb-3">关注官方账号，发布带话题的打卡照片，即可领取</p>
                        
                        <div class="space-y-3">
                            <div class="flex items-center p-3 bg-white rounded-lg">
                                <div class="w-10 h-10 rounded-full bg-yunnan-yellow/20 flex items-center justify-center mr-3">
                                    <i class="fa fa-check text-yunnan-yellow"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium">拍摄打卡照</p>
                                    <p class="text-xs text-gray-500">包含服务区标识或文化元素</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-lg">
                                <div class="w-10 h-10 rounded-full bg-yunnan-yellow/20 flex items-center justify-center mr-3">
                                    <i class="fa fa-check text-yunnan-yellow"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium">关注官方账号</p>
                                    <p class="text-xs text-gray-500">微信公众号或抖音号</p>
                                </div>
                                <button class="text-yunnan-red text-sm font-medium btn-hover" id="followOfficialBtn">
                                    已关注 <i class="fa fa-check ml-1"></i>
                                </button>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-lg">
                                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                                    <i class="fa fa-camera text-gray-400"></i>
                                </div>
                                <div class="flex-1">
                                    <p class="font-medium">上传打卡照片</p>
                                    <p class="text-xs text-gray-500">添加话题 #云南驿历史打卡</p>
                                </div>
                                <label for="photoUpload" class="text-yunnan-red text-sm font-medium cursor-pointer btn-hover">
                                    上传 <i class="fa fa-upload ml-1"></i>
                                </label>
                                <input type="file" id="photoUpload" accept="image/*" class="hidden">
                            </div>
                        </div>
                        
                        <button class="mt-4 w-full bg-yunnan-red text-white py-2 rounded-lg font-medium btn-hover" id="generateSupplyVoucher">
                            生成领取凭证
                        </button>
                    </div>
                    
                    <div class="bg-yunnan-light rounded-xl p-4">
                        <h3 class="font-bold text-lg mb-2 flex items-center">
                            <i class="fa fa-postcard text-yunnan-green mr-2"></i>实体明信片+香包                        </h3>
                        <p class="text-sm text-gray-600 mb-3">关注官方账号，上传打卡照即可领取</p>
                        
                        <div class="flex items-center justify-between p-3 bg-white rounded-lg mb-4">
                            <div>
                                <p class="font-medium">已关注官方账号</p>
                                <p class="text-xs text-gray-500">2023-06-15 关注</p>
                            </div>
                            <span class="text-green-500 flex items-center">
                                <i class="fa fa-check-circle mr-1"></i> 已完成
                            </span>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-3 mb-4">
                            <div class="bg-white rounded-lg p-3 text-center group">
                                <img src="https://picsum.photos/id/1063/300/200" alt="云南驿明信片" class="w-full h-24 object-cover rounded mb-2 transition-transform duration-300 group-hover:scale-105">
                                <p class="text-xs">云南驿主题明信片</p>
                            </div>
                            <div class="bg-white rounded-lg p-3 text-center group">
                                <img src="image\香包.jpg" alt="云驿香音" class="w-full h-24 object-cover rounded mb-2 transition-transform duration-300 group-hover:scale-105">
                                <p class="text-xs">云驿香音</p>
                            </div>
                        </div>
                        
                        <button class="w-full bg-yunnan-green text-white py-2 rounded-lg font-medium btn-hover" id="generatePostcardVoucher">
                            生成明信片领取凭证
                        </button>
                    </div>
                </div>
            </section>

            <!-- 集章兑周边页面 -->
            <section id="stampPage" class="page hidden">
<div class="p-4">
                    <h2 class="text-xl font-bold mb-4">集章兑周边</h2>
                    
                    <!-- 集章进度 -->
                    <div class="bg-white rounded-xl p-4 mb-5 border border-gray-100">
                        <div class="flex justify-between items-center mb-3">
                            <h3 class="font-bold">集章进度</h3>
                            <span class="text-sm bg-yunnan-yellow/20 text-yunnan-dark px-2 py-1 rounded-full" id="stampProgress">0/6 已收集</span>
                        </div>
                        
                        <div class="flex overflow-x-auto scrollbar-hide pb-2 space-x-3 mb-4">
                            <div class="flex-shrink-0 w-16 text-center stamp-item" data-stamp="yunnanyi">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                    <i class="fa fa-times text-gray-400"></i>
                                </div>
                                <p class="text-xs">云南驿</p>
                            </div>
                            <div class="flex-shrink-0 w-16 text-center stamp-item" data-stamp="dali">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                    <i class="fa fa-times text-gray-400"></i>
                                </div>
                                <p class="text-xs">大理</p>
                            </div>
                            <div class="flex-shrink-0 w-16 text-center stamp-item" data-stamp="chuxiong">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                    <i class="fa fa-times text-gray-400"></i>
                                </div>
                                <p class="text-xs">楚雄</p>
                            </div>
                            <div class="flex-shrink-0 w-16 text-center stamp-item" data-stamp="kunmingxi">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                    <i class="fa fa-times text-gray-400"></i>
                                </div>
                                <p class="text-xs">昆明西</p>
                            </div>
                            <div class="flex-shrink-0 w-16 text-center stamp-item" data-stamp="baoshan">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                    <i class="fa fa-times text-gray-400"></i>
                                </div>
                                <p class="text-xs">保山</p>
                            </div>
                            <div class="flex-shrink-0 w-16 text-center stamp-item" data-stamp="lijiang">
                                <div class="w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1">
                                    <i class="fa fa-times text-gray-400"></i>
                                </div>
                                <p class="text-xs">丽江</p>
                            </div>
                        </div>
                        
                        <div class="bg-yunnan-light p-3 rounded-lg">
                            <p class="text-sm mb-2"><i class="fa fa-lightbulb-o text-yunnan-yellow mr-1"></i> 隐藏任务</p>
                            <p class="text-xs text-gray-600">在云南驿服务区找到3处文化打卡点，可额外获得1枚隐藏章</p>
                            <div class="mt-2 flex space-x-2">
                                <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-xs hidden-task" data-task="1">?</div>
                                <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-xs hidden-task" data-task="2">?</div>
                                <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-xs hidden-task" data-task="3">?</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 集章地图 -->
                    <div class="bg-white rounded-xl p-4 mb-5 border border-gray-100">
                        <h3 class="font-bold mb-3">楚大高速文旅地图</h3>
                        <div class="relative h-48 bg-gray-100 rounded-lg overflow-hidden mb-3 cursor-pointer" id="stampMap">
                            <img src="https://picsum.photos/id/1015/800/400" alt="楚大高速路线图" class="w-full h-full object-cover">
                            <!-- 地图上的标记点 -->
                            <div class="absolute top-1/4 left-1/3 w-4 h-4 bg-yunnan-red rounded-full border-2 border-white cursor-pointer pulse" data-point="yunnanyi" title="云南驿服务区"></div>
                            <div class="absolute top-1/2 left-1/2 w-4 h-4 bg-yunnan-red rounded-full border-2 border-white cursor-pointer" data-point="dali" title="大理服务区"></div>
                            <div class="absolute top-3/4 left-2/3 w-4 h-4 bg-yunnan-green rounded-full border-2 border-white cursor-pointer" data-point="chuxiong" title="楚雄服务区"></div>
                        </div>
                        <button class="w-full bg-white border border-yunnan-green text-yunnan-green py-2 rounded-lg font-medium flex items-center justify-center btn-hover" id="navigateToNext">
                            <i class="fa fa-map-marker mr-2"></i> 导航至下一站
                        </button>
                    </div>
                    
                    <!-- 兑换周边 -->
                    <div class="bg-white rounded-xl p-4 border border-gray-100">
                        <h3 class="font-bold mb-3">可兑换周边</h3>
                        
                        <div class="grid grid-cols-2 gap-3 mb-4">
                            <div class="border border-gray-100 rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition duration-200 exchange-item" data-require="3">
                                <img src="image\钥匙扣.jpg" alt="钥匙链" class="w-full h-32 object-cover">
                                <div class="p-2">
                                    <p class="font-medium text-sm">一路有你钥匙链</p>
                                    <p class="text-xs text-gray-500">需3枚印章</p>
                                </div>
                            </div>
                            <div class="border border-gray-100 rounded-lg overflow-hidden cursor-pointer hover:shadow-md transition duration-200 exchange-item" data-require="5">
                                <img src="image\徽章.jpg" alt="徽章" class="w-full h-32 object-cover">
                                <div class="p-2">
                                    <p class="font-medium text-sm">云南驿徽章</p>
                                    <p class="text-xs text-gray-500">需5枚印章</p>
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full bg-yunnan-dark text-white py-2 rounded-lg font-medium btn-hover" id="exchangeGiftBtn">
                            申请兑换周边
                        </button>
                    </div>
                </div>
            </section>

            <!-- 青春留言墙页面 -->
            <section id="messageWallPage" class="page hidden">
                <div class="p-4">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-xl font-bold">青春留言墙</h2>
                        <button class="bg-yunnan-red text-white px-3 py-1 rounded-lg text-sm font-medium btn-hover transform transition-all duration-300 hover:scale-105" onclick="navigateTo('addMessagePage')">
                            <i class="fa fa-pencil mr-1"></i> 我要留言
                        </button>
                    </div>
                    
                    <!-- 精选留言 -->
                    <div class="mb-5">
                        <h3 class="font-bold mb-3 flex items-center">
                            <i class="fa fa-star text-yellow-500 mr-2"></i> 每周精选
                        </h3>
                        
                        <div class="bg-white rounded-xl p-4 mb-3 border border-gray-100 hover:shadow-md transition duration-300">
                            <div class="flex items-start mb-3">
                                <img src="https://picsum.photos/id/1005/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                                <div>
                                    <div class="flex items-center">
                                        <p class="font-medium mr-2">旅行者小李</p>
                                        <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-0.5 rounded-full">精选</span>
                                    </div>
                                    <p class="text-sm mt-1">"这一站不赶时间，慢慢感受马帮文化的历史沉淀"</p>
                                </div>
                            </div>
                            <img src="https://picsum.photos/id/1037/600/400" alt="留言照片" class="w-full h-48 object-cover rounded-lg mb-2 cursor-pointer hover:opacity-90 transition duration-200">
                            <div class="flex justify-between items-center text-xs text-gray-500">
                                <p>2023-06-10</p>
                                <div class="flex items-center">
                                    <span class="flex items-center mr-3 like-btn cursor-pointer" data-id="1"><i class="fa fa-heart-o mr-1"></i> 42</span>
                                    <span class="flex items-center comment-btn cursor-pointer" data-id="1"><i class="fa fa-comment-o mr-1"></i> 5</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white rounded-xl p-4 border border-gray-100 hover:shadow-md transition duration-300">
                            <div class="flex items-start mb-3">
                                <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="w-10 h-10 rounded-full object-cover mr-3">
                                <div>
                                    <div class="flex items-center">
                                        <p class="font-medium mr-2">在路上的一家人</p>
                                        <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-0.5 rounded-full">精选</span>
                                    </div>
                                    <p class="text-sm mt-1">"将茶马古道的千年历史与大理白族的浪漫文化相融合，创造一个既能承载厚重历史，又充满现代亲和力的文化IP形象"</p>
                                </div>
                            </div>
                            <img src="image\ip形象.jpg">
                            <div class="flex justify-between items-center text-xs text-gray-500">
                                <p>2023-06-08</p>
                                <div class="flex items-center">
                                    <span class="flex items-center mr-3 like-btn cursor-pointer" data-id="2"><i class="fa fa-heart-o mr-1"></i> 36</span>
                                    <span class="flex items-center comment-btn cursor-pointer" data-id="2"><i class="fa fa-comment-o mr-1"></i> 8</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 最新留言 -->
                    <div>
                        <h3 class="font-bold mb-3">最新留言</h3>
                        
                        <div class="space-y-3" id="latestMessages">
                            <div class="bg-white rounded-xl p-3 border border-gray-100 hover:shadow-sm transition duration-200">
                                <div class="flex items-start">
                                    <img src="https://picsum.photos/id/1025/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover mr-2">
                                    <div class="flex-1">
                                        <p class="font-medium text-sm">背包客小王</p>
                                        <p class="text-xs text-gray-600 mt-1">"靠补给才能感悟，云南驿的米线很好吃！"</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-3 border border-gray-100 hover:shadow-sm transition duration-200">
                                <div class="flex items-start">
                                    <img src="https://picsum.photos/id/1062/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover mr-2">
                                    <div class="flex-1">
                                        <p class="font-medium text-sm">自驾游爱好者</p>
                                        <p class="text-xs text-gray-600 mt-1">"打卡成功，集章进度+1，下一站大理！"</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="bg-white rounded-xl p-3 border border-gray-100 hover:shadow-sm transition duration-200">
                                <div class="flex items-start">
                                    <img src="https://picsum.photos/id/1074/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover mr-2">
                                    <div class="flex-1">
                                        <p class="font-medium text-sm">历史系学生</p>
                                        <p class="text-xs text-gray-600 mt-1">"作为历史爱好者，这里的马帮文化展太赞了！"</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button class="w-full mt-4 bg-white border border-gray-300 text-gray-700 py-2 rounded-lg font-medium btn-hover" id="loadMoreMessages">
                            加载更多
                        </button>
                    </div>
                </div>
            </section>

            <!-- 添加留言页面 -->
            <section id="addMessagePage" class="page hidden">
                <div class="p-4">
                    <h2 class="text-xl font-bold mb-4">我要留言</h2>
                    
                    <div class="bg-white rounded-xl p-4 mb-4 border border-gray-100">
                        <p class="text-sm text-gray-600 mb-3">分享你的旅途感悟或对云南驿的印象</p>
                        
                        <textarea id="messageContent" class="w-full border border-gray-200 rounded-lg p-3 h-32 mb-4 resize-none focus:ring-2 focus:ring-yunnan-yellow focus:border-yunnan-yellow transition duration-200" placeholder="例如：这一站不赶时间，慢慢感受历史的沉淀..."></textarea>
                        
                        <div class="mb-4">
                            <p class="text-sm font-medium mb-2">上传照片（可选）</p>
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-yunnan-yellow transition duration-200" id="messagePhotoContainer">
                                <i class="fa fa-camera text-2xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-500">点击上传或拖拽照片至此处</p>
                                <input type="file" accept="image/*" class="hidden" id="messagePhotoUpload">
                                <button class="mt-2 text-yunnan-red text-sm font-medium btn-hover" onclick="document.getElementById('messagePhotoUpload').click()">
                                    选择照片
                                </button>
                            </div>
                            <div id="photoPreview" class="hidden mt-3">
                                <img id="previewImage" src="" alt="预览图" class="w-full h-48 object-cover rounded-lg">
                                <button class="mt-2 text-gray-500 text-sm btn-hover" id="removePhoto">
                                    <i class="fa fa-trash mr-1"></i> 移除照片
                                </button>
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <p class="text-sm font-medium mb-2">推荐台词（可选）</p>
                            <div class="flex flex-wrap gap-2">
                                <span class="px-3 py-1 bg-yunnan-light rounded-full text-sm cursor-pointer btn-hover quote-btn">"这一站不赶时间"</span>
                                <span class="px-3 py-1 bg-yunnan-light rounded-full text-sm cursor-pointer btn-hover quote-btn">"靠补给才能感悟"</span>
                                <span class="px-3 py-1 bg-yunnan-light rounded-full text-sm cursor-pointer btn-hover quote-btn">"马帮精神，一路向前"</span>
                                <span class="px-3 py-1 bg-yunnan-light rounded-full text-sm cursor-pointer btn-hover quote-btn">"我在云南驿等风也等你"</span>
                            </div>
                        </div>
                        
                        <div class="flex items-center mb-4">
                            <input type="checkbox" id="allowPublish" class="mr-2" checked>
                            <label for="allowPublish" class="text-sm text-gray-600">同意我的留言和照片被选为精选并展示</label>
                        </div>
                        
                        <button class="w-full bg-yunnan-red text-white py-2 rounded-lg font-medium btn-hover transform transition-all duration-300 hover:scale-105" id="publishMessageBtn">
                            发布留言
                        </button>
                    </div>
                </div>
            </section>

            <!-- 文化体验套装页面 -->
            <section id="experiencePage" class="page hidden">
                <div class="p-4">
                    <h2 class="text-xl font-bold mb-4">文化体验套装</h2>
                    
                    <div class="bg-white rounded-xl p-4 mb-5 border border-gray-100">
                        <h3 class="font-bold text-lg mb-3">套装内容</h3>
                        
                        <div class="space-y-4">
                            <div class="flex group">
                                <div class="w-20 h-20 bg-yunnan-light rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="https://picsum.photos/id/1058/200/200" alt="打卡装置" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium">打卡装置（10套）</h4>
                                    <p class="text-sm text-gray-600 mt-1">每套含10张不同主题的打卡卡片，包括马帮文化卡、古驿道卡、旅途心情卡等</p>
                                    <p class="text-xs text-yunnan-green mt-1">摆放位置：马帮雕塑旁、古驿道遗址区</p>
                                </div>
                            </div>
                            
                            <div class="flex group">
                                <div class="w-20 h-20 bg-yunnan-light rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="https://picsum.photos/id/1065/200/200" alt="专属印章" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium">专属印章（10套）</h4>
                                    <p class="text-sm text-gray-600 mt-1">包含常规章、隐藏章和月度主题章，图案融入云南驿文化元素</p>
                                    <p class="text-xs text-yunnan-green mt-1">摆放位置：服务台主章台、各隐藏打卡点</p>
                                </div>
                            </div>
                            
                            <div class="flex group">
                                <div class="w-20 h-20 bg-yunnan-light rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="https://picsum.photos/id/1066/200/200" alt="留言墙配件" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium">留言墙配件（1套）</h4>
                                    <p class="text-sm text-gray-600 mt-1">含彩色便笺纸、拍照道具（古风折扇、马帮铃铛）和装饰贴纸</p>
                                    <p class="text-xs text-yunnan-green mt-1">摆放位置：留言墙旁储物架</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-4 border border-gray-100">
                        <h3 class="font-bold text-lg mb-3">体验地点</h3>
                        
                        <div class="space-y-3">
                            <div class="flex items-center p-3 bg-yunnan-light rounded-lg cursor-pointer hover:bg-yunnan-light/70 transition duration-200 exp-location" data-name="马帮文化体验区">
                                <i class="fa fa-map-marker text-yunnan-red mr-3"></i>
                                <div>
                                    <p class="font-medium">马帮文化体验区</p>
                                    <p class="text-xs text-gray-500">服务区东侧，马帮雕塑旁</p>
                                </div>
                                <i class="fa fa-arrow-right text-gray-400 ml-auto"></i>
                            </div>
                            
                            <div class="flex items-center p-3 bg-yunnan-light rounded-lg cursor-pointer hover:bg-yunnan-light/70 transition duration-200 exp-location" data-name="古驿道遗址打卡点">
                                <i class="fa fa-map-marker text-yunnan-red mr-3"></i>
                                <div>
                                    <p class="font-medium">古驿道遗址打卡点</p>
                                    <p class="text-xs text-gray-500">服务区北侧，历史展示区</p>
                                </div>
                                <i class="fa fa-arrow-right text-gray-400 ml-auto"></i>
                            </div>
                            
                            <div class="flex items-center p-3 bg-yunnan-light rounded-lg cursor-pointer hover:bg-yunnan-light/70 transition duration-200 exp-location" data-name="青春留言墙">
                                <i class="fa fa-map-marker text-yunnan-red mr-3"></i>
                                <div>
                                    <p class="font-medium">青春留言墙</p>
                                    <p class="text-xs text-gray-500">服务区中央休息区</p>
                                </div>
                                <i class="fa fa-arrow-right text-gray-400 ml-auto"></i>
                            </div>
                        </div>
                        
                        <!-- 体验预约 -->
                        <div class="mt-5 p-3 bg-yunnan-light rounded-lg">
                            <h4 class="font-medium mb-2">文化体验预约</h4>
                            <p class="text-sm text-gray-600 mb-3">预约文化讲解服务，深入了解云南驿历史文化</p>
                            
                            <div class="grid grid-cols-2 gap-2 mb-3">
                                <div>
                                    <label class="text-xs text-gray-500 block mb-1">日期</label>
                                    <input type="date" class="w-full border border-gray-300 rounded-lg p-2 text-sm">
                                </div>
                                <div>
                                    <label class="text-xs text-gray-500 block mb-1">时间</label>
                                    <select class="w-full border border-gray-300 rounded-lg p-2 text-sm">
                                        <option>10:00-11:00</option>
                                        <option>14:00-15:00</option>
                                        <option>16:00-17:00</option>
                                    </select>
                                </div>
                            </div>
                            
                            <button class="w-full bg-yunnan-green text-white py-2 rounded-lg font-medium text-sm btn-hover" id="bookGuideService">
                                预约讲解服务
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- AR文化互动页面 -->
            <section id="arPage" class="page hidden">
                <div class="p-4">
                    <h2 class="text-xl font-bold mb-4">AR文化体验</h2>
                    
                    <div class="bg-white rounded-xl p-4 mb-5 border border-gray-100">
                        <div class="relative h-64 bg-gray-100 rounded-lg overflow-hidden mb-4 cursor-pointer group" id="startArExperience">
                            <img src="image\AR.jpg" alt="AR体验预览" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                            <div class="absolute inset-0 flex items-center justify-center">
                                <div class="w-16 h-12 rounded-full bg-white/80 flex items-center justify-center pulse">
                                    <i class="fa fa-play text-yunnan-red text-2xl"></i>
                                </div>
                            </div>
                            <div class="absolute top-3 left-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                                扫描触发点开始体验
                            </div>
                        </div>
                        
                        <h3 class="font-bold mb-2">AR体验内容</h3>
                        <ul class="space-y-2 mb-4">
                            <li class="flex items-start text-sm">
                                <i class="fa fa-check-circle text-yunnan-green mt-1 mr-2"></i>
                                <span>观看马帮运输的动态AR动画，重现茶马古道繁荣景象</span>
                            </li>
                            <li class="flex items-start text-sm">
                                <i class="fa fa-check-circle text-yunnan-green mt-1 mr-2"></i>
                                <span>收听历史人物语音解说，了解云南驿的前世今生</span>
                            </li>
                            <li class="flex items-start text-sm">
                                <i class="fa fa-check-circle text-yunnan-green mt-1 mr-2"></i>
                                <span>参与"帮马帮装茶叶"互动小游戏，赢取电子纪念章</span>
                            </li>
                        </ul>
                        
                        <button class="w-full bg-yunnan-green text-white py-2 rounded-lg font-medium btn-hover transform transition-all duration-300 hover:scale-105" id="launchArBtn">
                            开始AR体验
                        </button>
                    </div>
                    
                    <div class="bg-white rounded-xl p-4 border border-gray-100">
                        <h3 class="font-bold mb-3">AR触发点位置</h3>
                        
                        <div class="space-y-3">
                            <div class="flex group">
                                <div class="w-16 h-16 bg-yunnan-light rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="https://picsum.photos/id/1077/200/200" alt="古驿道触发点" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium text-sm">古驿道触发点</h4>
                                    <p class="text-xs text-gray-600 mt-1">古驿道遗址区石碑旁</p>
                                    <button class="mt-1 text-xs text-blue-500 btn-hover ar-nav-btn" data-point="1">
                                        <i class="fa fa-map-marker mr-1"></i> 导航到这里
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex group">
                                <div class="w-16 h-16 bg-yunnan-light rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="https://picsum.photos/id/1078/200/200" alt="马帮雕塑触发点" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium text-sm">马帮雕塑触发点</h4>
                                    <p class="text-xs text-gray-600 mt-1">马帮文化体验区雕塑前</p>
                                    <button class="mt-1 text-xs text-blue-500 btn-hover ar-nav-btn" data-point="2">
                                        <i class="fa fa-map-marker mr-1"></i> 导航到这里
                                    </button>
                                </div>
                            </div>
                            
                            <div class="flex group">
                                <div class="w-16 h-16 bg-yunnan-light rounded-lg overflow-hidden flex-shrink-0">
                                    <img src="https://picsum.photos/id/1079/200/200" alt="抗战纪念馆触发点" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
                                </div>
                                <div class="ml-3 flex-1">
                                    <h4 class="font-medium text-sm">抗战纪念馆触发点</h4>
                                    <p class="text-xs text-gray-600 mt-1">抗战纪念馆入口处</p>
                                    <button class="mt-1 text-xs text-blue-500 btn-hover ar-nav-btn" data-point="3">
                                        <i class="fa fa-map-marker mr-1"></i> 导航到这里
                                    </button>
                                </div>
                            </div>
                                </div>
                </div>
            </section>

            <!-- 导航页面 -->
            <section id="navigationPage" class="page hidden">
                <div class="p-4">
                    <h2 class="text-xl font-bold mb-4">服务区导航</h2>
                    
                    <div class="bg-white rounded-xl p-4 mb-5 border border-gray-100">
                        <div class="relative h-64 bg-gray-100 rounded-lg overflow-hidden mb-4">
                            <img src="https://picsum.photos/id/1019/800/600" alt="服务区地图" class="w-full h-full object-cover" id="navigationMap">
                            <!-- 地图上的标记点 -->
                            <div class="absolute top-1/4 left-1/3 w-5 h-5 bg-blue-500 rounded-full border-2 border-white flex items-center justify-center" id="userMarker">
                                <i class="fa fa-user text-white text-xs"></i>
                            </div>
                            <div class="absolute top-1/2 left-1/2 w-5 h-5 bg-yunnan-red rounded-full border-2 border-white flex items-center justify-center" id="destinationMarker">
                                <i class="fa fa-map-marker text-white text-xs"></i>
                            </div>
                            <!-- 导航路线 -->
                            <svg class="absolute inset-0 w-full h-full" id="navigationPath">
                                <path d="M100,100 Q150,50 200,200" stroke="blue" stroke-width="3" fill="none" stroke-dasharray="5,5" />
                            </svg>
                        </div>
                        
                        <div class="flex justify-between items-center mb-4">
                            <div>
                                <p class="font-medium" id="destinationName">马帮雕塑触发点</p>
                                <p class="text-sm text-gray-500">距离约150米，步行2分钟</p>
                            </div>
                            <button class="bg-yunnan-green text-white px-3 py-1 rounded-lg text-sm font-medium btn-hover" id="startNavigationBtn">
                                <i class="fa fa-location-arrow mr-1"></i> 开始导航
                            </button>
                        </div>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <button class="bg-white border border-gray-300 text-gray-700 py-2 rounded-lg font-medium flex items-center justify-center btn-hover" id="compassBtn">
                                <i class="fa fa-compass mr-2"></i> 指南针
                            </button>
                            <button class="bg-white border border-gray-300 text-gray-700 py-2 rounded-lg font-medium flex items-center justify-center btn-hover" id="voiceNavigationBtn">
                                <i class="fa fa-volume-up mr-2"></i> 语音导航
                            </button>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-4 border border-gray-100">
                        <h3 class="font-bold mb-3">常用地点</h3>
                        
                        <div class="grid grid-cols-2 gap-3">
                            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-yunnan-light/50 transition duration-200 nav-location" data-name="服务台">
                                <i class="fa fa-info-circle text-yunnan-yellow text-xl mb-1"></i>
                                <p class="text-sm">服务台</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-yunnan-light/50 transition duration-200 nav-location" data-name="卫生间">
                                <i class="fa fa-bath text-yunnan-red text-xl mb-1"></i>
                                <p class="text-sm">卫生间</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-yunnan-light/50 transition duration-200 nav-location" data-name="餐厅">
                                <i class="fa fa-cutlery text-yunnan-green text-xl mb-1"></i>
                                <p class="text-sm">餐厅</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-yunnan-light/50 transition duration-200 nav-location" data-name="停车场">
                                <i class="fa fa-car text-blue-500 text-xl mb-1"></i>
                                <p class="text-sm">停车场</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-yunnan-light/50 transition duration-200 nav-location" data-name="马帮文化体验区">
                                <i class="fa fa-horse text-yellow-600 text-xl mb-1"></i>
                                <p class="text-sm">马帮文化体验区</p>
                            </div>
                            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:bg-yunnan-light/50 transition duration-200 nav-location" data-name="抗战纪念馆">
                                <i class="fa fa-university text-gray-700 text-xl mb-1"></i>
                                <p class="text-sm">抗战纪念馆</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 长辈模式页面 -->
            <section id="elderModePage" class="page hidden">
                <div class="p-6">
                    <h2 class="text-2xl font-bold mb-6">云南驿服务区</h2>
                    
                    <div class="grid grid-cols-2 gap-6 mb-6">
                        <div class="bg-yunnan-yellow rounded-xl p-5 text-white flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105" onclick="navigateTo('stampPage')">
                            <i class="fa fa-stamp text-4xl mb-3"></i>
                            <p class="font-bold text-lg">集章兑奖</p>
                        </div>
                        <div class="bg-yunnan-green rounded-xl p-5 text-white flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105" onclick="navigateTo('checkinPage')">
                            <i class="fa fa-gift text-4xl mb-3"></i>
                            <p class="font-bold text-lg">领取礼品</p>
                        </div>
                        <div class="bg-blue-500 rounded-xl p-5 text-white flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105" id="elderNavigation">
                            <i class="fa fa-map-marker text-4xl mb-3"></i>
                            <p class="font-bold text-lg">服务导航</p>
                        </div>
                        <div class="bg-purple-500 rounded-xl p-5 text-white flex flex-col items-center justify-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105" id="elderCulture">
                            <i class="fa fa-headphones text-4xl mb-3"></i>
                            <p class="font-bold text-lg">文化讲解</p>
                        </div>
                    </div>
                    
                    <div class="bg-white rounded-xl p-5 mb-6 border border-gray-200">
                        <h3 class="font-bold text-xl mb-4">服务区信息</h3>
                        
                        <div class="space-y-4">
                            <div class="flex items-center">
                                <i class="fa fa-phone text-yunnan-red text-xl mr-4"></i>
                                <p class="text-lg">服务台电话：0872-XXXXXXX</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-clock-o text-yunnan-red text-xl mr-4"></i>
                                <p class="text-lg">营业时间：24小时</p>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-medkit text-yunnan-red text-xl mr-4"></i>
                                <p class="text-lg">医疗点：服务区东侧</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 紧急呼叫按钮 -->
                    <div class="bg-red-500 rounded-xl p-5 mb-6 text-white text-center cursor-pointer btn-hover transform transition-all duration-300 hover:scale-105" id="emergencyCall">
                        <i class="fa fa-ambulance text-4xl mb-2"></i>
                        <p class="font-bold text-xl">紧急呼叫</p>
                    </div>
                    
                    <button class="w-full bg-gray-200 text-gray-800 py-3 rounded-lg font-bold text-lg btn-hover" id="exitElderModeBtn">
                        退出长辈模式
                    </button>
                </div>
            </section>

            <!-- 领取凭证页面 -->
            <section id="voucherPage" class="page hidden">
                <div class="p-4">
                    <h2 class="text-xl font-bold mb-4">领取凭证</h2>
                    
                    <div class="bg-white rounded-xl p-5 border border-gray-100 text-center mb-6 scale-in">
                        <div class="w-32 h-32 mx-auto bg-yunnan-light rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-qrcode text-5xl text-yunnan-dark"></i>
                        </div>
                        <h3 class="text-lg font-bold mb-1" id="voucherTitle">青春补给包领取凭证</h3>
                        <p class="text-sm text-gray-500 mb-4" id="voucherDesc">凭此凭证可在服务台领取青春补给包一份</p>
                        
                        <div class="flex justify-center items-center text-xs text-gray-500 mb-4">
                            <p id="voucherCode">凭证编号：YN2023061800125</p>
                        </div>
                        
                        <div class="border-t border-gray-200 pt-4 text-xs text-gray-500">
                            <p>有效期限：2023-06-18 至 2023-06-25</p>
                            <p class="mt-1">领取地点：云南驿服务区服务台</p>
                        </div>
                    </div>
                    
                    <div class="bg-yunnan-light rounded-xl p-4 mb-4">
                        <h3 class="font-bold mb-3 flex items-center">
                            <i class="fa fa-info-circle text-yunnan-dark mr-2"></i> 领取说明
                        </h3>
                        <ul class="space-y-2 text-sm">
                            <li class="flex items-start">
                                <i class="fa fa-angle-right text-yunnan-red mt-1 mr-2"></i>
                                <span>请在有效期内前往指定地点领取</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-angle-right text-yunnan-red mt-1 mr-2"></i>
                                <span>出示此凭证给工作人员扫码验证</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fa fa-angle-right text-yunnan-red mt-1 mr-2"></i>
                                <span>每个游客限领一次，不可重复领取</span>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="flex space-x-3">
                        <button class="flex-1 bg-white border border-gray-300 text-gray-700 py-2 rounded-lg font-medium flex items-center justify-center btn-hover" id="saveVoucherBtn">
                            <i class="fa fa-download mr-2"></i> 保存凭证
                        </button>
                        <button class="flex-1 bg-yunnan-red text-white py-2 rounded-lg font-medium flex items-center justify-center btn-hover" id="shareVoucherBtn">
                            <i class="fa fa-share-alt mr-2"></i> 分享
                        </button>
                    </div>
                </div>
            </section>
        </main>

      <!-- 底部导航 -->
<footer class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 py-2 px-6 flex justify-around z-40">
    <div class="flex flex-col items-center cursor-pointer" onclick="navigateTo('homePage')">
        <i class="fa fa-home text-yunnan-yellow text-xl"></i>
        <span class="text-xs mt-1 text-yunnan-yellow">首页</span>
    </div>
    <div class="flex flex-col items-center cursor-pointer" onclick="navigateTo('checkinPage')">
        <i class="fa fa-camera text-gray-400 text-xl"></i>
        <span class="text-xs mt-1 text-gray-400">打卡</span>
    </div>
    <div class="flex flex-col items-center cursor-pointer" onclick="navigateTo('stampPage')">
        <!-- 替换为更符合集章主题的图标 -->
        <i class="fa fa-map-signs text-gray-400 text-xl"></i>
        <span class="text-xs mt-1 text-gray-400">集章</span>
    </div>
    <div class="flex flex-col items-center cursor-pointer" onclick="navigateTo('messageWallPage')">
        <i class="fa fa-comment text-gray-400 text-xl"></i>
        <span class="text-xs mt-1 text-gray-400">留言</span>
    </div>
</footer>
    </div>

    <script>
        // 全局状态管理
        const appState = {
            stamps: [],
            hiddenTasks: [],
            checkins: 0,
            messages: 0,
            notifications: 3,
            init() {
                // 从本地存储加载状态
                const savedState = localStorage.getItem('yunnanyi_app_state');
                if (savedState) {
                    const parsed = JSON.parse(savedState);
                    this.stamps = parsed.stamps || [];
                    this.hiddenTasks = parsed.hiddenTasks || [];
                    this.checkins = parsed.checkins || 0;
                    this.messages = parsed.messages || 0;
                    this.notifications = parsed.notifications || 3;
                }
                this.updateUI();
            },
            save() {
                // 保存状态到本地存储
                localStorage.setItem('yunnanyi_app_state', JSON.stringify({
                    stamps: this.stamps,
                    hiddenTasks: this.hiddenTasks,
                    checkins: this.checkins,
                    messages: this.messages,
                    notifications: this.notifications
                }));
                this.updateUI();
            },
            addStamp(stampId) {
                if (!this.stamps.includes(stampId)) {
                    this.stamps.push(stampId);
                    this.save();
                    showNotification(`成功收集【${getStampName(stampId)}】印章`);
                    return true;
                }
                return false;
            },
            completeHiddenTask(taskId) {
                if (!this.hiddenTasks.includes(taskId)) {
                    this.hiddenTasks.push(taskId);
                    this.save();
                    showNotification(`发现隐藏任务【${taskId}】，获得额外奖励！`);
                    
                    // 完成3个隐藏任务获得隐藏章
                    if (this.hiddenTasks.length === 3) {
                        this.addStamp('hidden');
                        showNotification('恭喜完成所有隐藏任务，获得隐藏印章！');
                    }
                    return true;
                }
                return false;
            },
            addCheckin() {
                this.checkins++;
                this.save();
            },
            addMessage() {
                this.messages++;
                this.save();
            },
            readNotifications() {
                this.notifications = 0;
                this.save();
            },
            updateUI() {
                // 更新通知徽章
                const badge = document.getElementById('notificationBadge');
                if (this.notifications > 0) {
                    badge.textContent = this.notifications;
                    badge.classList.remove('hidden');
                } else {
                    badge.classList.add('hidden');
                }
                
                // 更新集章数量显示
                document.getElementById('stampCount').textContent = this.stamps.length;
                document.getElementById('checkinCount').textContent = this.checkins;
                document.getElementById('messageCount').textContent = this.messages;
                document.getElementById('stampProgress').textContent = `${this.stamps.length}/6 已收集`;
                
                // 更新集章显示状态
                document.querySelectorAll('.stamp-item').forEach(item => {
                    const stampId = item.dataset.stamp;
                    const iconContainer = item.querySelector('div');
                    
                    if (this.stamps.includes(stampId)) {
                        iconContainer.className = 'w-12 h-12 mx-auto rounded-full bg-yunnan-red flex items-center justify-center mb-1';
                        iconContainer.innerHTML = '<i class="fa fa-check text-white"></i>';
                    } else {
                        iconContainer.className = 'w-12 h-12 mx-auto rounded-full bg-gray-200 flex items-center justify-center mb-1';
                        iconContainer.innerHTML = '<i class="fa fa-times text-gray-400"></i>';
                    }
                });
                
                // 更新隐藏任务显示状态
                document.querySelectorAll('.hidden-task').forEach(item => {
                    const taskId = item.dataset.task;
                    
                    if (this.hiddenTasks.includes(taskId)) {
                        item.className = 'w-8 h-8 rounded-full bg-yunnan-green flex items-center justify-center text-xs text-white';
                        item.innerHTML = '<i class="fa fa-check"></i>';
                    } else {
                        item.className = 'w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-xs';
                        item.innerHTML = '?';
                    }
                });
                
                // 更新兑换按钮状态
                const exchangeBtn = document.getElementById('exchangeGiftBtn');
                if (this.stamps.length >= 3) {
                    exchangeBtn.disabled = false;
                    exchangeBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                } else {
                    exchangeBtn.disabled = true;
                    exchangeBtn.classList.add('opacity-50', 'cursor-not-allowed');
                }
                
                // 更新兑换物品状态
                document.querySelectorAll('.exchange-item').forEach(item => {
                    const require = parseInt(item.dataset.require);
                    if (this.stamps.length >= require) {
                        item.classList.add('border-yunnan-green');
                    } else {
                        item.classList.remove('border-yunnan-green');
                    }
                });
            }
        };

        // 工具函数 - 获取印章名称
        function getStampName(stampId) {
            const names = {
                'yunnanyi': '云南驿',
                'dali': '大理',
                'chuxiong': '楚雄',
                'kunmingxi': '昆明西',
                'baoshan': '保山',
                'lijiang': '丽江',
                'hidden': '隐藏章'
            };
            return names[stampId] || stampId;
        }

        // 工具函数 - 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            const notificationText = document.getElementById('notificationText');
            
            notificationText.textContent = message;
            notification.classList.remove('hidden');
            
            setTimeout(() => {
                notification.classList.add('hidden');
            }, 3000);
        }

        // 工具函数 - 显示加载状态
        function showLoader() {
            document.getElementById('loader').classList.remove('hidden');
        }

        // 工具函数 - 隐藏加载状态
        function hideLoader() {
            document.getElementById('loader').classList.add('hidden');
        }

        // 页面导航功能
        function navigateTo(pageId) {
            // 显示加载状态
            showLoader();
            
            setTimeout(() => {
                hideLoader();
                
                // 隐藏所有页面
                document.querySelectorAll('.page').forEach(page => {
                    page.classList.add('hidden');
                });
                
                // 显示目标页面
                document.getElementById(pageId).classList.remove('hidden');
                
                // 更新页面标题
                const pageTitles = {
                    'homePage': '云南驿服务区',
                    'checkinPage': '打卡领补给',
                    'stampPage': '集章兑周边',
                    'messageWallPage': '青春留言墙',
                    'addMessagePage': '我要留言',
                    'experiencePage': '文化体验套装',
                    'arPage': 'AR文化体验',
                    'profilePage': '个人中心',
                    'navigationPage': '服务区导航',
                    'elderModePage': '云南驿服务区',
                    'voucherPage': '领取凭证'
                };
                document.getElementById('pageTitle').textContent = pageTitles[pageId] || '云南驿服务区';
                
                // 更新底部导航高亮
                document.querySelectorAll('footer i').forEach(icon => {
                    icon.classList.remove('text-yunnan-yellow');
                    icon.classList.add('text-gray-400');
                });
                document.querySelectorAll('footer span').forEach(span => {
                    span.classList.remove('text-yunnan-yellow');
                    span.classList.add('text-gray-400');
                });
                
                const navMap = {
                    'homePage': 0,
                    'checkinPage': 1,
                    'stampPage': 2,
                    'messageWallPage': 3,
                    'addMessagePage': 3,
                    'experiencePage': 0,
                    'arPage': 0,
                    'profilePage': 0,
                    'navigationPage': 0,
                    'elderModePage': 0,
                    'voucherPage': 0
                };
                
                if (navMap[pageId] !== undefined) {
                    const icons = document.querySelectorAll('footer i');
                    const spans = document.querySelectorAll('footer span');
                    icons[navMap[pageId]].classList.remove('text-gray-400');
                    icons[navMap[pageId]].classList.add('text-yunnan-yellow');
                    spans[navMap[pageId]].classList.remove('text-gray-400');
                    spans[navMap[pageId]].classList.add('text-yunnan-yellow');
                }
                
                // 滚动到顶部
                window.scrollTo(0, 0);
            }, 300);
        }
        
        // 初始化应用
        function initApp() {
            appState.init();
            initEventListeners();
        }
        
        // 初始化所有事件监听器
        function initEventListeners() {
            // 返回按钮功能
            document.getElementById('backBtn').addEventListener('click', () => {
                // 判断当前页面，返回对应页面
                const currentPage = document.querySelector('.page:not(.hidden)').id;
                const backMap = {
                    'checkinPage': 'homePage',
                    'stampPage': 'homePage',
                    'messageWallPage': 'homePage',
                    'addMessagePage': 'messageWallPage',
                    'experiencePage': 'homePage',
                    'arPage': 'homePage',
                    'profilePage': 'homePage',
                    'navigationPage': 'homePage',
                    'elderModePage': 'homePage',
                    'voucherPage': 'checkinPage'
                };
                
                navigateTo(backMap[currentPage] || 'homePage');
            });
            
            // 用户中心按钮
            document.getElementById('userProfileBtn').addEventListener('click', () => {
                navigateTo('profilePage');
            });
            
            // 通知按钮
            document.getElementById('notificationBell').addEventListener('click', () => {
                showNotification('您有3条未读消息');
                appState.readNotifications();
            });
            
            // 长辈模式切换
            document.getElementById('elderModeBtn').addEventListener('click', () => {
                navigateTo('elderModePage');
            });
            
            document.getElementById('exitElderModeBtn').addEventListener('click', () => {
                navigateTo('homePage');
            });
            
            // 长辈模式功能按钮
            document.getElementById('elderNavigation').addEventListener('click', () => {
                navigateTo('navigationPage');
            });
            
            document.getElementById('elderCulture').addEventListener('click', () => {
                showNotification('正在播放文化讲解...');
            });
            
            // 长辈模式紧急呼叫
            document.getElementById('emergencyCall').addEventListener('click', () => {
                showNotification('紧急服务已呼叫，工作人员将尽快到达');
            });
            
            // 轮播图功能
            let currentSlide = 0;
            const slides = document.querySelectorAll('.carousel > div');
            const indicators = document.querySelectorAll('.carousel-indicator');
            const totalSlides = slides.length;
            
            function showSlide(index) {
                // 隐藏所有指示器高亮
                indicators.forEach(ind => ind.classList.remove('active', 'bg-white'));
                indicators.forEach(ind => ind.classList.add('bg-white/50'));
                
                // 显示当前指示器高亮
                indicators[index].classList.add('active', 'bg-white');
                indicators[index].classList.remove('bg-white/50');
                
                // 移动轮播
                document.querySelector('.carousel').style.transform = `translateX(-${index * 100}%)`;
            }
            
            // 自动轮播
            setInterval(() => {
                currentSlide = (currentSlide + 1) % totalSlides;
                showSlide(currentSlide);
            }, 5000);
            
            // 点击指示器切换轮播
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    currentSlide = index;
                    showSlide(currentSlide);
                });
            });
            
            // 文化知识问答功能
            document.querySelectorAll('.quiz-option').forEach(option => {
                option.addEventListener('click', function() {
                    // 重置所有选项样式
                    document.querySelectorAll('.quiz-option').forEach(opt => {
                        opt.classList.remove('bg-green-100', 'border-green-500', 'bg-red-100', 'border-red-500');
                    });
                    
                    // 设置当前选项样式
                    if (this.dataset.correct === 'true') {
                        this.classList.add('bg-green-100', 'border-green-500');
                        showNotification('回答正确！获得10积分');
                    } else {
                        this.classList.add('bg-red-100', 'border-red-500');
                        // 显示正确答案
                        document.querySelectorAll('.quiz-option').forEach(opt => {
                            if (opt.dataset.correct === 'true') {
                                opt.classList.add('bg-green-100', 'border-green-500');
                            }
                        });
                    }
                    
                    // 显示答案解析
                    document.getElementById('quizAnswer').classList.remove('hidden');
                });
            });
            
            // 打卡相关功能
            document.getElementById('followOfficialBtn').addEventListener('click', () => {
                showNotification('已成功关注官方账号');
            });
            
            document.getElementById('photoUpload').addEventListener('change', function(e) {
                if (this.files && this.files[0]) {
                    showNotification('照片上传成功');
                    // 模拟已完成此步骤
                    const iconContainer = document.querySelector('#checkinPage .flex.items-center.p-3.bg-white.rounded-lg:nth-child(3) .w-10.h-10');
                    iconContainer.className = 'w-10 h-10 rounded-full bg-yunnan-yellow/20 flex items-center justify-center mr-3';
                    iconContainer.innerHTML = '<i class="fa fa-check text-yunnan-yellow"></i>';
                }
            });
            
            // 生成领取凭证
            document.getElementById('generateSupplyVoucher').addEventListener('click', () => {
                // 检查是否完成所有步骤
                const steps = document.querySelectorAll('#checkinPage .flex.items-center.p-3.bg-white.rounded-lg');
                let completed = true;
                
                steps.forEach(step => {
                    const icon = step.querySelector('.w-10 h-10 i');
                    if (!icon || icon.classList.contains('fa-camera') || icon.classList.contains('fa-times')) {
                        completed = false;
                    }
                });
                
                if (!completed) {
                    showNotification('请先完成所有步骤');
                    return;
                }
                
                // 更新打卡次数
                appState.addCheckin();
                
                // 设置凭证信息
                document.getElementById('voucherTitle').textContent = '青春补给包领取凭证';
                document.getElementById('voucherDesc').textContent = '凭此凭证可在服务台领取青春补给包一份';
                document.getElementById('voucherCode').textContent = `凭证编号：YN${new Date().getFullYear()}${(new Date().getMonth() + 1).toString().padStart(2, '0')}${new Date().getDate().toString().padStart(2, '0')}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`;
                
                navigateTo('voucherPage');
            });
            
            document.getElementById('generatePostcardVoucher').addEventListener('click', () => {
                // 更新打卡次数
                appState.addCheckin();
                
                // 设置凭证信息
                document.getElementById('voucherTitle').textContent = '明信片+矿泉水领取凭证';
                document.getElementById('voucherDesc').textContent = '凭此凭证可在服务台领取明信片和矿泉水一份';
                document.getElementById('voucherCode').textContent = `凭证编号：YN${new Date().getFullYear()}${(new Date().getMonth() + 1).toString().padStart(2, '0')}${new Date().getDate().toString().padStart(2, '0')}${Math.floor(Math.random() * 1000).toString().padStart(3, '0')}`;
                
                navigateTo('voucherPage');
            });
            
            // 保存和分享凭证
            document.getElementById('saveVoucherBtn').addEventListener('click', () => {
                showNotification('凭证已保存到相册');
            });
            
            document.getElementById('shareVoucherBtn').addEventListener('click', () => {
                showNotification('分享功能已打开');
            });
            
            // 集章相关功能
            document.querySelectorAll('.stamp-item').forEach(item => {
                item.addEventListener('click', function() {
                    const stampId = this.dataset.stamp;
                    appState.addStamp(stampId);
                });
            });
            
            // 隐藏任务点击
            document.querySelectorAll('.hidden-task').forEach(item => {
                item.addEventListener('click', function() {
                    const taskId = this.dataset.task;
                    appState.completeHiddenTask(taskId);
                });
            });
            
            // 集章地图点击
            document.querySelectorAll('#stampMap [data-point]').forEach(point => {
                point.addEventListener('click', function() {
                    const pointId = this.dataset.point;
                    appState.addStamp(pointId);
                });
            });
            
            // 导航到下一站
            document.getElementById('navigateToNext').addEventListener('click', () => {
                navigateTo('navigationPage');
            });
            
            // 兑换周边
            document.getElementById('exchangeGiftBtn').addEventListener('click', () => {
                if (appState.stamps.length >= 3) {
                    showNotification('兑换申请已提交，请前往服务台领取');
                } else {
                    showNotification('需要至少3枚印章才能兑换');
                }
            });
            
            // 留言墙功能
            document.querySelectorAll('.like-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const icon = this.querySelector('i');
                    const countEl = this;
                    
                    if (icon.classList.contains('fa-heart-o')) {
                        icon.classList.remove('fa-heart-o');
                        icon.classList.add('fa-heart', 'text-red-500');
                        countEl.innerHTML = `<i class="fa fa-heart text-red-500 mr-1"></i> ${parseInt(countEl.textContent) + 1}`;
                    } else {
                        icon.classList.remove('fa-heart', 'text-red-500');
                        icon.classList.add('fa-heart-o');
                        countEl.innerHTML = `<i class="fa fa-heart-o mr-1"></i> ${parseInt(countEl.textContent) - 1}`;
                    }
                });
            });
            
            document.querySelectorAll('.comment-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const messageId = this.dataset.id;
                    document.getElementById('commentModal').classList.remove('hidden');
                    // 可以在这里加载对应消息的评论
                });
            });
            
            // 关闭评论模态框
            document.getElementById('closeCommentBtn').addEventListener('click', () => {
                document.getElementById('commentModal').classList.add('hidden');
            });
            
            // 提交评论
            document.getElementById('submitCommentBtn').addEventListener('click', () => {
                const commentText = document.getElementById('commentInput').value;
                if (commentText.trim() === '') {
                    showNotification('请输入评论内容');
                    return;
                }
                
                const commentsContainer = document.getElementById('commentsContainer');
                const newComment = document.createElement('div');
                newComment.className = 'bg-gray-100 p-3 rounded-lg';
                newComment.innerHTML = `
                    <div class="flex items-start">
                        <img src="https://picsum.photos/id/1005/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover mr-2">
                        <div class="flex-1">
                            <p class="font-medium text-sm">游客</p>
                            <p class="text-sm mt-1">${commentText}</p>
                            <p class="text-xs text-gray-500 mt-1">刚刚</p>
                        </div>
                    </div>
                `;
                
                commentsContainer.prepend(newComment);
                document.getElementById('commentInput').value = '';
                showNotification('评论发表成功');
            });
            
            // 加载更多留言
            document.getElementById('loadMoreMessages').addEventListener('click', () => {
                showNotification('正在加载更多留言...');
                // 模拟加载更多
                setTimeout(() => {
                    const latestMessages = document.getElementById('latestMessages');
                    const newMessage = document.createElement('div');
                    newMessage.className = 'bg-white rounded-xl p-3 border border-gray-100 hover:shadow-sm transition duration-200';
                    newMessage.innerHTML = `
                        <div class="flex items-start">
                            <img src="https://picsum.photos/id/10${Math.floor(Math.random() * 90)}/100/100" alt="用户头像" class="w-8 h-8 rounded-full object-cover mr-2">
                            <div class="flex-1">
                                <p class="font-medium text-sm">新用户${Math.floor(Math.random() * 1000)}</p>
                                <p class="text-xs text-gray-600 mt-1">"云南驿的文化氛围真的很棒！"</p>
                            </div>
                        </div>
                    `;
                    latestMessages.appendChild(newMessage);
                }, 1000);
            });
            
            // 发布留言
            document.getElementById('publishMessageBtn').addEventListener('click', () => {
                const messageContent = document.getElementById('messageContent').value;
                if (messageContent.trim() === '') {
                    showNotification('请输入留言内容');
                    return;
                }
                
                appState.addMessage();
                showNotification('留言发布成功！');
                navigateTo('messageWallPage');
            });
            
            // 推荐台词点击
            document.querySelectorAll('.quote-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    document.getElementById('messageContent').value = this.textContent;
                });
            });
            
            // 照片上传预览
            document.getElementById('messagePhotoUpload').addEventListener('change', function(e) {
                if (this.files && this.files[0]) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        document.getElementById('previewImage').src = e.target.result;
                        document.getElementById('photoPreview').classList.remove('hidden');
                    }
                    reader.readAsDataURL(this.files[0]);
                }
            });
            
            // 移除照片
            document.getElementById('removePhoto').addEventListener('click', () => {
                document.getElementById('photoPreview').classList.add('hidden');
                document.getElementById('messagePhotoUpload').value = '';
            });
            
            // 视频播放功能
            document.getElementById('cultureVideo').addEventListener('click', () => {
                document.getElementById('videoModal').classList.remove('hidden');
                document.getElementById('videoTitle').textContent = '云南驿：茶马古道上的千年驿站';
                document.getElementById('videoDesc').textContent = '历史场景还原视频';
                // 这里应该设置视频源，但由于是示例，我们使用占位符
            });
            
            // 关闭视频
            document.getElementById('closeVideoBtn').addEventListener('click', () => {
                document.getElementById('videoModal').classList.add('hidden');
                const video = document.getElementById('modalVideo');
                video.pause();
                video.currentTime = 0;
            });
            
            // AR体验
            document.getElementById('launchArBtn').addEventListener('click', () => {
                showNotification('AR功能需要相机权限，请在弹出窗口中允许');
            });
            
            document.querySelectorAll('.ar-nav-btn').forEach(btn => {
                btn.addEventListener('click', function() {
                    const pointId = this.dataset.point;
                    navigateTo('navigationPage');
                    // 可以在这里设置导航目的地
                });
            });
            
            // 导航功能
            document.querySelectorAll('.nav-location').forEach(location => {
                location.addEventListener('click', function() {
                    const locationName = this.dataset.name;
                    document.getElementById('destinationName').textContent = locationName;
                    showNotification(`已设置目的地：${locationName}`);
                });
            });
            
            document.getElementById('startNavigationBtn').addEventListener('click', () => {
                showNotification('开始导航，请跟随路线指示');
            });
            
            // 紧急服务
            document.getElementById('emergencyService').addEventListener('click', () => {
                showNotification('紧急服务已呼叫，工作人员将尽快到达');
            });
            
            // 行李寄存
            document.getElementById('baggageStorage').addEventListener('click', () => {
                showNotification('行李寄存服务位于服务台右侧');
            });
            
            // 实时服务信息点击
            document.getElementById('parkingInfo').addEventListener('click', () => {
                showNotification('停车场位于服务区南侧，共有100个车位');
            });
            
            document.getElementById('restaurantInfo').addEventListener('click', () => {
                showNotification('餐厅位于主楼二层，提供云南特色美食');
            });
            
            document.getElementById('toiletInfo').addEventListener('click', () => {
                showNotification('卫生间位于主楼一层东西两侧');
            });
            
            document.getElementById('chargingInfo').addEventListener('click', () => {
                showNotification('充电桩位于停车场东侧，共有5个充电桩');
            });
            
            // 初始化轮播
            showSlide(0);
        }
        
        // 页面加载完成后初始化应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>